<template>
    <div class="el-container">
        <div class="el-container" v-if="zhihuUserInfo != null && zhihuUserInfo.user_type === 0">
            <el-header>
                <el-row :gutter="20">
                    <el-col :span="4">
                        <div><router-link :to="{'path': '/main'}">技术林</router-link></div>
                    </el-col>
                    <el-col :span="14">
                        <div>
                            <el-menu :default-active="activeIndex" mode="horizontal">
                                <el-menu-item index="adminhome"><div @click="goDetail('adminHome')">我的主页</div></el-menu-item>

                                <el-submenu index="topics">
                                    <template slot="title">话题中心</template>
                                    <el-menu-item :index="item.path" v-for="(item, index) in topics" :key="index">
                                        <div @click="goDetail(item.path)">{{item.title}}</div>
                                    </el-menu-item>
                                </el-submenu>

                                <el-submenu index="statistics">
                                    <template slot="title">站内统计</template>
                                    <el-menu-item :index="item.path" v-for="(item, index) in statistics" :key="index">
                                        <div @click="goDetail(item.path)">{{item.title}}</div>
                                    </el-menu-item>
                                </el-submenu>

                                <el-submenu index="syscenter">
                                    <template slot="title">信息中心</template>
                                    <el-menu-item :index="item.path" v-for="(item, index) in syscenter" :key="index">
                                        <div @click="goDetail(item.path)">{{item.title}}</div>
                                    </el-menu-item>
                                </el-submenu>
                                <el-submenu index="systems">
                                    <template slot="title">系统设置</template>
                                    <el-menu-item :index="item.path" v-for="(item, index) in systems" :key="index">
                                        <div @click="goDetail(item.path)">{{item.title}}</div>
                                    </el-menu-item>
                                </el-submenu>
                            </el-menu>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="cursor-header">
                            <router-link :to="{'path': '/messages'}">
                                <el-avatar title="私信" style="position: relative;top: 10px;background: #db2828!important;width: 30px;height: 30px;line-height: 30px;" v-if="messageNums > 99"> {{messageNums}}+ </el-avatar>
                                <el-avatar title="私信" style="position: relative;top: 10px;background: #db2828!important;width: 30px;height: 30px;line-height: 30px;" v-else-if="messageNums > 0"> {{messageNums}} </el-avatar>
                                <el-avatar title="私信" style="position: relative;top: 10px;background: #ebe8e8!important;width: 30px;height: 30px;line-height: 30px;" v-else-if="messageNums === 0"> {{messageNums}} </el-avatar>
                            </router-link>
                            <span class="space"></span>
                            <el-avatar style="position: relative;top: 10px;" :size="30" :src="zhihuUserInfo.avatar"
                                @error="errorAvatarHandler"></el-avatar>
                            <el-dropdown trigger="hover" size="small" @command="handleCommand">
                                <span class="el-dropdown-link">
                                    {{zhihuUserInfo.nickname}}<i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command="personal"><i class="el-icon-user-solid"></i>个人信息</el-dropdown-item>
                                    <el-dropdown-item command="syssetting"><i class="el-icon-s-tools"></i>系统设置</el-dropdown-item>
                                    <el-divider></el-divider>
                                    <el-dropdown-item command="signOut"><i class="el-icon-d-arrow-right"></i>退出登录</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                            <!-- <div style="float: right;font-size: 12px;color: #0080FF;margin-right: 20px;" @click="setMainSize">
                                <span>{{changeMainSize == false ? '平铺': '还原'}}</span>
                            </div> -->
                        </div>
                    </el-col>
                </el-row>
            </el-header>
        </div>
        <div class="el-container" v-else-if="zhihuUserInfo != null && zhihuUserInfo.user_type === 1">
            <el-header>
                <el-row :gutter="20">
                    <el-col :span="4">
                        <div><router-link :to="{'path': '/main'}">技术林</router-link></div>
                    </el-col>
                    <el-col :span="14">
                        <div>
                            &nbsp;
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="cursor-header">
                            <el-dropdown trigger="hover" size="small" @command="handleCrdCommand">
                                <span class="el-dropdown-link">创建<i class="el-icon-arrow-down el-icon--right"></i></span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command="blogsCrd"><i class="el-icon-edit-outline"></i>新建博文</el-dropdown-item>
                                    <el-dropdown-item command="discussCrd"><i class="el-icon-chat-round"></i>发起讨论</el-dropdown-item>
                                    <el-dropdown-item command="linksCrd"><i class="el-icon-link"></i>分享链接</el-dropdown-item>
                                    <el-dropdown-item command="questionsCrd"><i class="el-icon-question"></i>提个问题</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                            <span class="space"></span>
                            <router-link :to="{'path': '/messages'}">
                                <el-avatar title="私信" style="position: relative;top: 10px;background: #db2828!important;width: 30px;height: 30px;line-height: 30px;" v-if="messageNums > 99"> {{messageNums}}+ </el-avatar>
                                <el-avatar title="私信" style="position: relative;top: 10px;background: #db2828!important;width: 30px;height: 30px;line-height: 30px;" v-else-if="messageNums > 0"> {{messageNums}} </el-avatar>
                                <el-avatar title="私信" style="position: relative;top: 10px;background: #ebe8e8!important;width: 30px;height: 30px;line-height: 30px;" v-else-if="messageNums === 0"> {{messageNums}} </el-avatar>
                            </router-link>
                            <span class="space"></span>
                            <el-avatar style="position: relative;top: 10px;" :size="30" :src="zhihuUserInfo.avatar"
                                @error="errorAvatarHandler"></el-avatar>
                            <el-dropdown trigger="hover" size="small" @command="handleCommand">
                                <span class="el-dropdown-link">
                                    {{zhihuUserInfo.nickname}}<i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command="myPrestige"><i class="el-icon-trophy"></i>我的声望</el-dropdown-item>
                                    <el-divider></el-divider>
                                    <el-dropdown-item command="myCollection"><i class="el-icon-star-on"></i>我的收藏</el-dropdown-item>
                                    <el-divider></el-divider>
                                    <el-dropdown-item command="myBlogs"><i class="el-icon-notebook-1"></i>我的博文</el-dropdown-item>
                                    <el-dropdown-item command="myQuestion"><i class="el-icon-question"></i>我的问题</el-dropdown-item>
                                    <el-dropdown-item command="myLink"><i class="el-icon-link"></i>我的链接</el-dropdown-item>
                                    <el-dropdown-item command="myDiscuss"><i class="el-icon-chat-round"></i>我的讨论</el-dropdown-item>
                                    <el-divider></el-divider>
                                    <el-dropdown-item command="myFollowers"><i class="el-icon-view"></i>我的关注</el-dropdown-item>
                                    <el-dropdown-item command="myFans"><i class="el-icon-s-opportunity"></i>我的粉丝</el-dropdown-item>
                                    <el-divider></el-divider>
                                    <el-dropdown-item command="personal"><i class="el-icon-user-solid"></i>编辑资料</el-dropdown-item>
                                    <el-dropdown-item command="personalCenter"><i class="el-icon-s-home"></i>个人中心</el-dropdown-item>
                                    <el-divider></el-divider>
                                    <el-dropdown-item command="adviseFeedback"><i class="el-icon-s-promotion"></i>建议反馈</el-dropdown-item>
                                    <el-divider></el-divider>
                                    <el-dropdown-item command="signOut"><i class="el-icon-d-arrow-right"></i>退出登录</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                            <!-- <div style="float: right;font-size: 12px;color: #0080FF;margin-right: 20px;" @click="setMainSize">
                                <span>{{changeMainSize == false ? '平铺': '还原'}}</span>
                            </div> -->
                        </div>
                    </el-col>
                </el-row>
            </el-header>
        </div>
        <!-- <div class="el-container" v-else-if="zhihuUserInfo != null">
            <el-header>
                <el-row :gutter="20">
                    <el-col :span="10">
                        <div><router-link :to="{'path': '/main'}">技术林</router-link></div>
                    </el-col>
                    <el-col :span="8">
                        <div>
                            <el-input placeholder="请输入内容">
                                <template slot="append"><i class="el-icon-search"></i></template>
                            </el-input>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="cursor-header">
                            <router-link :to="{'path': '/messages'}">
                                <el-avatar title="私信" style="position: relative;top: 10px;background: #db2828!important;width: 30px;height: 30px;line-height: 30px;" v-if="messageNums > 99"> {{messageNums}}+ </el-avatar>
                                <el-avatar title="私信" style="position: relative;top: 10px;background: #db2828!important;width: 30px;height: 30px;line-height: 30px;" v-else-if="messageNums > 0"> {{messageNums}} </el-avatar>
                                <el-avatar title="私信" style="position: relative;top: 10px;background: #ebe8e8!important;width: 30px;height: 30px;line-height: 30px;" v-else-if="messageNums === 0"> {{messageNums}} </el-avatar>
                            </router-link>
                            <span class="space"></span>
                            <el-avatar style="position: relative;top: 10px;" :size="30" :src="zhihuUserInfo.avatar"
                                @error="errorAvatarHandler"></el-avatar>
                            <el-dropdown trigger="hover" size="small" @command="handleCommand">
                                <span class="el-dropdown-link">
                                    {{zhihuUserInfo.nickname}}<i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command="personalCenter">个人中心</el-dropdown-item>
                                    <el-dropdown-item command="signOut">退出登录</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                    </el-col>
                </el-row>
            </el-header>
        </div> -->
        <div class="el-container" v-else-if="zhihuUserInfo == null">
            <el-drawer title="用户登录" :visible.sync="loginDrawer" :direction="direction" size="400px" :with-header="false">
                <userLogin></userLogin>
            </el-drawer>
            <el-header>
                <el-row :gutter="20">
                    <el-col :span="10">
                        <div><router-link :to="{'path': '/main'}">技术林</router-link></div>
                    </el-col>
                    <el-col :span="8">
                        <div>
                            <el-input placeholder="请输入内容">
                                <template slot="append"><i class="el-icon-search"></i></template>
                            </el-input>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div>
                            <el-button type="success" @click="adviseFeedback" title="建议反馈" icon="el-icon-s-promotion" circle></el-button>
                            <el-button @click="register">注册</el-button>
                            <el-button type="primary" @click="loginDrawer = true">登录</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-header>
        </div>
    </div>
</template>

<script>
    import {
        isNull
    } from '../util/util'
    import {
        getToken, removeToken
    } from '../util/auth'
    import userLogin from '../components/userLogin'
    import webSiteDesc from '../components/webSiteDesc'
    import noticeSystem from '../components/noticeSystem'
    import topicSystem from '../components/topicSystem'
    import advSystem from '../components/advSystem'
    import questionCard from '../components/questionCard'
    export default {
        inject: ['reload'],
        data() {
            return {
                messageNums: 0,
                zhihuUserInfo: null,
                loginDrawer: false,
                direction: 'rtl',
                activeIndex: 'adminhome',
                parentUrl: '/admin/',
                changeMainSize: false,
                topics: [
                    {
                        title: '话题设置',
                        path: 'topicSetting'
                    },
                    {
                        title: '问题举报管理',
                        path: 'reportManager'
                    },
                    {
                        title: '评论举报管理',
                        path: 'reportCommentManager'
                    },
                    {
                        title: '问题列表',
                        path: 'questionListManager'
                    },
                    {
                        title: '脏问题列表',
                        path: 'questionDirtyListManager'
                    }
                ],
                statistics: [{
                        title: '注册量',
                        path: 'regStatis'
                    },
                    {
                        title: '访问量',
                        path: 'visitStatis'
                    },
                    {
                        title: '话题量',
                        path: 'topicStatis'
                    },
                    {
                        title: '活跃度分析',
                        path: 'activityStatis'
                    },
                ],
                syscenter: [{
                    title: '站内用户',
                    path: 'userManager'
                }, {
                    title: '建议反馈处理',
                    path: 'feedBack'
                }, {
                    title: '消息发布',
                    path: 'sysmsgPublish'
                }],
                systems: [{
                        title: '配置源管理',
                        path: 'sourceConfig'
                    },
                    {
                        title: '配置管理',
                        path: 'configManager'
                    },
                    {
                        title: '声望分值配置',
                        path: 'prestigeScore'
                    },
                    {
                        title: '封面管理',
                        path: 'websiteCover'
                    },
                    {
                        title: '系统公告',
                        path: 'websiteNotice'
                    },
                    {
                        title: '广告设置',
                        path: 'advsSetting'
                    },
                    {
                        title: '友情链接',
                        path: 'friendLink'
                    },
                ],
            }
        },
        components: {
            userLogin,
            webSiteDesc,
            noticeSystem,
            topicSystem,
            advSystem,
            questionCard
        },
        created() {
            if (localStorage.getItem('zhihuUserInfo') && localStorage.getItem('zhihuUserInfo') !== 'null' && getToken()) {
                this.zhihuUserInfo = JSON.parse(localStorage.getItem('zhihuUserInfo'))
            }
            this.listMessageTotals()
        },
        methods: {
            errorAvatarHandler() {
                return true;
            },
            handleCommand(command) {
                this[command]()
            },
            goDetail(key) {
                this.$router.push({
                    path: this.parentUrl + key,
                    query: {
                        id: Date.parse(new Date())
                    }
                })
            },
            setMainSize() {
                this.$emit('setMainSize')
            },
            listMessageTotals() {
                const _this = this
                const params = {}
                _this.axios.post(_this.$API.ZHIHUAPI.listMessageTotals, _this.qs.stringify(params)).then((res) => {
                    res = res.data
                    if (res.code === 10000) {
                        if (res.hasOwnProperty('data') && Object.keys(res.data).length > 0) {
                            _this.messageNums = res.data.totals
                        } else {
                            _this.messageNums = 0
                        }
                    } else {
                        _this.messageNums = 0
                    }
                }).catch(() => {
                    _this.messageNums = 0
                })
            },
            personalCenter() {
                if (this.zhihuUserInfo.user_type === 0) {
                    this.$router.push({
                        path: "/admin"
                    });
                } else {
                    this.$router.push({
                        path: "/customer"
                    });
                }
                this.reload()
            },
            personal() {
                this.$router.push({
                    path: "/personal"
                });
            },
            syssetting() {
                this.$router.push({
                    path: "/admin/sysSetting"
                });
            },
            register() {
                this.$router.push({
                    path: "/register"
                });
            },
            signOut() {
                const _this = this
                _this.$confirm('请确认是否退出登录', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const fullscreenLoading = this.$loading({
                        lock: true,
                        text: '退出登录中',
                        spinner: 'el-icon-loading'
                    })
                    _this.axios.post(_this.$API.ZHIHUAPI.signOut).then((res) => {
                        fullscreenLoading.close()
                        res = res.data
                        if (res.code === '10000' || res.code === 10000) {
                            _this.$message({
                                showClose: false,
                                message: '退出登录成功',
                                type: 'success'
                            })
                            setTimeout(() => {
                                this.$router.push({
                                    path: "/main"
                                });
                                localStorage.setItem('zhihuUserInfo', null)
                                removeToken()
                                this.reload()
                            }, 1000)
                        }
                    }).catch(() => {
                        fullscreenLoading.close()
                    })
                })
            },
            // 我的声望
            myPrestige() {
                this.$router.push({path: "/customer/myPrestige"})
            },
            // 我的收藏
            myCollection() {
                this.$router.push({path: "/customer/myCollection"})
            },
            // 我的博文
            myBlogs() {
                this.$router.push({path: "/customer/myBlogs"})
            },
            // 我的问题
            myQuestion() {
                this.$router.push({path: "/customer/myQuestion"})
            },
            // 我的链接
            myLink() {
                this.$router.push({path: "/customer/myLink"})
            },
            // 我的讨论
            myDiscuss() {
                this.$router.push({path: "/customer/myDiscuss"})
            },
            // 我的关注
            myFollowers() {
                this.$router.push({path: "/customer/myFollowers"})
            },
            // 我的粉丝
            myFans() {
                this.$router.push({path: "/customer/myFans"})
            },
            // 建议反馈
            adviseFeedback() {
                if (isNull(this.zhihuUserInfo)) {
                    return this.$message({
                        showClose: false,
                        message: "您还没有登录",
                        type: 'warning'
                    })
                }
                this.$router.push({path: "/customer/adviseFeedback"})
            },
            handleCrdCommand(command) {
                this[command]()
            },
            // 新建博文
            blogsCrd() {
                this.$router.push({path: "/customer/blogsCrd"})
            },
            // 发起讨论
            discussCrd() {
                this.$router.push({path: "/customer/discussCrd"})
            },
            // 分享链接
            linksCrd() {
                this.$router.push({path: "/customer/linksCrd"})
            },
            // 提个问题
            questionsCrd() {
                this.$router.push({path: "/customer/questionsCrd"})
            },
        }
    }
</script>
<style scoped>

</style>
